import {throttle} from 'lodash'

const vInfiniteScroll = {
    mounted(el, binding, vnode){
        let store = binding.value
        // 展示内容容器元素
        const scrollEle = document.querySelector('.el-select-dropdown__wrap')
        // 展示滚动内容元素 
        const wrapperEle = document.querySelector('.el-select-dropdown__list')
        // 如果这两个元素都存在说明下拉框初始化完成 可以触发之后的操作
        if(wrapperEle && scrollEle){
            // 独立定义滚动函数 保证组件卸载或指令失效时可以正确的卸载监听事件
            const handleScroll = throttle(async ()=>{

                // console.log(scrollEle.scrollTop, '滚动元素实际距离顶部滚动的距离');
                // console.log(scrollEle.clientHeight, '滚动元素实际展示的区域');
                // console.log(wrapperEle.scrollHeight , '滚动元素显示内容+隐藏内容需要的全部高度');
                
                // 滚动元素实际距离顶部滚动的距离 + 滚动元素实际展示的区域 > 滚动元素显示内容+隐藏内容需要的全部高度 - 认为是底部的判断范围
                // 满足上述公式即认为是触发底部

                const isBottom = scrollEle.scrollTop  + scrollEle.clientHeight >= wrapperEle.scrollHeight - 10
                if(isBottom){
                    await store.getData()
                }
            }, 500)
            // 绑定事件
            scrollEle.addEventListener('scroll', handleScroll)
            // 将事件绑定到元素上 保证指令销毁时事件监听也会被销毁
            el._initInfiniteScroll = handleScroll
        } else {
            return 
        }
    },
    beforeUnmount(el, binding, vnode) {
        // 展示内容容器元素
        const scrollEle = document.querySelector('.el-select-dropdown__wrap')
        if(scrollEle){
            scrollEle.removeEventListener('scroll', el._initInfiniteScroll);
        }
    },
}
export default vInfiniteScroll